<template>
  <h3>子孙组件</h3>
  <div>{{ provideCount }}</div>
  <button @click="subtract">点击递减</button>
</template>
<script setup lang="ts">
// provide('key', value); // 提供数据

import { inject, Ref } from 'vue';

// const value = inject('key'); // 接收数据
const provideCount = inject<Ref<number>>('provideCount');

/**
 * 子孙组件修改注入的响应式数据
 *
 * inject 默认类型 为 unKnow,需要指定类型 - 推荐使用泛型，减少类型断言 as 的使用
 * 找到数据定义处通过类型推导机制拿到具体类型 - Ref<number>
 * 使用泛型定义类型，Ref 是 vue 封装的泛型工具类型，需要手动引入
 * 依赖注入的值有可能是 undefined ，需要判断有才执行业务操作
 */

const subtract = () => {
  // provideCount. //“provideCount”的类型为“未知”
  if (provideCount) provideCount.value -= 1000;
};
</script>
